<template>
  <header class="header">
    <div class="container header-container">
      <div class="logo-container">
        <router-link to="/">
          <img src="https://pan.feiwow.com/raw/files/2461749620224_.pic_thumb-1749620373495.jpg" alt="中空领航" class="logo">
          <span class="logo-text">中空领航</span>
        </router-link>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <div class="mobile-menu-toggle" @click="toggleMobileMenu">
        <span></span>
        <span></span>
        <span></span>
      </div>
      
      <nav class="main-nav" :class="{'mobile-active': mobileMenuOpen}">
        <ul class="nav-list">
          <li class="nav-item">
            <router-link to="/" class="nav-link" @click="closeMobileMenu">首页</router-link>
          </li>
          <li class="nav-item dropdown">
            <router-link to="/about" class="nav-link" @click="closeMobileMenu">关于我们</router-link>
            <div class="dropdown-menu">
              <router-link to="/about/culture" class="dropdown-item" @click="closeMobileMenu">核心文化</router-link>
              <router-link to="/about/qualification" class="dropdown-item" @click="closeMobileMenu">资质资信</router-link>
              <router-link to="/about/history" class="dropdown-item" @click="closeMobileMenu">发展历程</router-link>
            </div>
          </li>
          <li class="nav-item dropdown">
            <router-link to="/news" class="nav-link" @click="closeMobileMenu">新闻中心</router-link>
            <div class="dropdown-menu">
              <router-link to="/news/company" class="dropdown-item" @click="closeMobileMenu">公司新闻</router-link>
              <router-link to="/news/media" class="dropdown-item" @click="closeMobileMenu">媒体报道</router-link>
              <router-link to="/news/cooperation" class="dropdown-item" @click="closeMobileMenu">合作交流</router-link>
              <router-link to="/news/project" class="dropdown-item" @click="closeMobileMenu">项目动态</router-link>
              <router-link to="/news/industry" class="dropdown-item" @click="closeMobileMenu">行业动态</router-link>
              <router-link to="/news/technology" class="dropdown-item" @click="closeMobileMenu">技术分享</router-link>
              <router-link to="/news/notice" class="dropdown-item" @click="closeMobileMenu">公示</router-link>
            </div>
          </li>
          <li class="nav-item dropdown">
            <router-link to="/solutions" class="nav-link" @click="closeMobileMenu">生态发展</router-link>
            <div class="dropdown-menu">
              <router-link to="/solutions/digital-twin" class="dropdown-item" @click="closeMobileMenu">数字孪生与云网数脑</router-link>
              <router-link to="/solutions/urban-transport" class="dropdown-item" @click="closeMobileMenu">城市交通政策规划及综合治理</router-link>
              <router-link to="/solutions/major-project" class="dropdown-item" @click="closeMobileMenu">重大工程设计与新基建</router-link>
              <router-link to="/solutions/infrastructure" class="dropdown-item" @click="closeMobileMenu">基础设施监检测与运维</router-link>
              <router-link to="/solutions/digital-city" class="dropdown-item" @click="closeMobileMenu">数字化城市管理与运营服务</router-link>
            </div>
          </li>
          <li class="nav-item dropdown">
            <router-link to="/research" class="nav-link" @click="closeMobileMenu">科研成果</router-link>
            <div class="dropdown-menu">
              <router-link to="/research/intellectual-property" class="dropdown-item" @click="closeMobileMenu">知识产权</router-link>
              <router-link to="/research/research-carrier" class="dropdown-item" @click="closeMobileMenu">科研载体</router-link>
              <router-link to="/research/awards" class="dropdown-item" @click="closeMobileMenu">获奖情况</router-link>
            </div>
          </li>
          <li class="nav-item dropdown">
            <router-link to="/cooperation" class="nav-link" @click="closeMobileMenu">合作交流</router-link>
            <div class="dropdown-menu">
              <router-link to="/cooperation/industry-exchange" class="dropdown-item" @click="closeMobileMenu">行业交流</router-link>
              <router-link to="/cooperation/association" class="dropdown-item" @click="closeMobileMenu">协会组织</router-link>
              <router-link to="/cooperation/business" class="dropdown-item" @click="closeMobileMenu">业务合作</router-link>
              <router-link to="/cooperation/industry-university" class="dropdown-item" @click="closeMobileMenu">产学研合作</router-link>
            </div>
          </li>
          <li class="nav-item">
            <router-link to="/party" class="nav-link" @click="closeMobileMenu">党建风采</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/investor" class="nav-link" @click="closeMobileMenu">投资者关系</router-link>
          </li>
          <li class="nav-item dropdown">
            <router-link to="/hr" class="nav-link" @click="closeMobileMenu">人力资源</router-link>
            <div class="dropdown-menu">
              <router-link to="/hr/training" class="dropdown-item" @click="closeMobileMenu">培训发展</router-link>
              <router-link to="/hr/culture" class="dropdown-item" @click="closeMobileMenu">文化活动</router-link>
              <router-link to="/hr/recruitment" class="dropdown-item" @click="closeMobileMenu">人才招聘</router-link>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  name: 'HeaderComponent',
  data() {
    return {
      mobileMenuOpen: false
    }
  },
  methods: {
    toggleMobileMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen;
    },
    closeMobileMenu() {
      this.mobileMenuOpen = false;
    }
  }
}
</script>

<style scoped>
.header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding-left: 8vh;
  padding-right: 8vh;
}

.header-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  height: 80px;
  width: 100%;
  padding: 0 15px;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 50px;
  margin-right: 10px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.main-nav {
  height: 100%;
  justify-self: end;
}

.nav-list {
  display: flex;
  height: 100%;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link {
  padding: 0 20px;
  font-size: 16px;
  color: var(--text-color);
  height: 100%;
  display: flex;
  align-items: center;
  transition: color 0.3s;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-color);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1001;
}

.nav-item:hover .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-color);
  white-space: nowrap;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: var(--light-gray);
  color: var(--primary-color);
}

/* 移动端菜单样式 */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 1002;
}

.mobile-menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 3px;
  transition: all 0.3s ease;
}

@media (max-width: 992px) {
  .header {
    padding-left: 3vh;
    padding-right: 3vh;
  }
  
  .mobile-menu-toggle {
    display: flex;
    justify-self: end;
  }
  
  .main-nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    padding-top: 80px;
    z-index: 1000;
  }
  
  .main-nav.mobile-active {
    right: 0;
  }
  
  .nav-list {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
  }
  
  .nav-item {
    height: auto;
    width: 100%;
  }
  
  .nav-link {
    padding: 15px 20px;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--light-gray);
  }
  
  .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    padding-left: 20px;
    display: none;
  }
  
  .nav-item:hover .dropdown-menu {
    display: none; /* 移动端需要点击才展开 */
  }
  
  .nav-item.active .dropdown-menu {
    display: block;
  }
  
  .dropdown-item {
    padding: 10px 20px;
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .header-container {
    height: 60px;
  }
  
  .logo {
    height: 40px;
  }
  
  .logo-text {
    font-size: 18px;
  }
}
</style> 